<template>
	<view class="myinfo">
		<view class="info-wrap">
			<view class="item" @click="handleChangeHead">
				<text class="label">Avatar</text>
				<view class="right">
					<image :src="interfaceurl+userinfo.headImg" class="head"></image>
					<image src="../../static/images/personal/icon-r.png" class="right-icon"></image>
				</view>
			</view>
			<view class="item" @click="handleEdit('name')">
				<text class="label">nickname</text>
				<view class="right">
					<text>{{userinfo.username}}</text>
					<image src="../../static/images/personal/icon-r.png" class="right-icon"></image>
				</view>
			</view>
			<view class="item" @click="handleEdit('qq')">
				<text class="label">Line</text>
				<view class="right">
					<text>{{userinfo.qq|| 'customize'}}</text>
					<image src="../../static/images/personal/icon-r.png" class="right-icon"></image>
				</view>
			</view>
			<view class="item">
				<text class="label">mobile</text>
				<view class="right">
					<text>{{userinfo.mobile}}</text>
				</view>
			</view>
			<view class="item" @click="toBindCard">
				<text class="label">bankcard</text>
				<view class="right">
					<text>{{userinfo.is_bind_bank==1?'Bound':'bind'}}</text>
					<image src="../../static/images/personal/icon-r.png" class="right-icon"></image>
				</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="editbox">
				<view class="title">nickname</view>
				<view class="edit-wrap">
					<input type="text"  placeholder="please enter"/>
				</view>
				<view class="edit-btn">
					<text>submit</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2">
			<view class="editbox">
				<view class="title">Line</view>
				<view class="edit-wrap">
					<input type="text"  placeholder="please enter"/>
				</view>
				<view class="edit-btn">
					<text>submit</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import fetch from "@/common/fetch.js"
	export default{
		components:{uniPopup},
		data(){
			return{
				userinfo:{}
			}
		},
		computed:{
			interfaceurl(){
				let url = fetch.interfaceUrl()
				return url
			}
		},
		onShow(){
			let that = this
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
			        that.userinfo = res.data
			    }
			});
		},
		methods:{
			//选择头像
			handleChangeHead(){
				let that = this
				uni.chooseImage({
					count:1,
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: fetch.interfaceUrl()+'/index/index/doImgUpload',
				            filePath: tempFilePaths[0],
				            name: 'file',
				            success: (uploadFileRes) => {
				                let upurl = JSON.parse(uploadFileRes.data).data;																
								that.updateHead(upurl)								
				            }
				        });
				    }
				});
			},
			//更新头像
			updateHead(url){
				fetch.request('/index/ucenter/savePeopleImg',{headImg:url},'POST').then(res=>{
					fetch.toast('ok')
					this.userinfo.headImg = url
				})
			},
			//修改昵称，qq
			handleEdit(type){
				switch(type){
					case 'name':{
						this.$refs.popup.open()
						break;
					}
					case 'qq':{
						this.$refs.popup2.open()
						break;
					}
				}
				
			},
			toBindCard(){
				if(!this.userinfo.is_bind_bank){
					uni.navigateTo({
						url:'/pages/withdraw/subpage/bindBankCard/index'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		height: 100%;
		background: #f8f8f8;
	}
	.info-wrap{
		width: 710rpx;
		margin-left: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.item{
			border-bottom: solid 1rpx #f4f4f4;
			padding: 20rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			&:last-child{
				border-bottom: none;
			}
			.label{
				color: #8798a3;
			}
			.right{
				display: flex;
				align-items: center;
				.head{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: #a0d8e5;
				}
				.right-icon{
					width: 20rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	.editbox{
		background: #fff;
		border-radius: 10rpx;
		width: 680rpx;
		font-size: 16px;
		.title{
			padding: 40rpx 0;
			text-align: center;
			color: #6a6a6a;
		}
		.edit-wrap{
			padding: 50rpx;
			background: #f8f8f8;
			box-sizing: border-box;
			text-align: center;
		}
		.edit-btn{
			padding: 40rpx;
			box-sizing: border-box;
			text{
				display: block;
				height: 80rpx;
				width: 100%;
				color: #fff;
				background: #F53D46;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
			}
		}
	}
</style>
